<template>
  <a-card :bordered="false">
    
    <a-input-group
      :compact="true"
      style="padding: 180px 0px; width: 40%;margin-left:30%;height:60px"

    >
      <a-select defaultValue="1" style="width: 100px" @change='onSelectChange'>
        <a-select-option value="1">房屋</a-select-option>
        <a-select-option value="2">车辆</a-select-option>
        <a-select-option value="3">车位</a-select-option>
        <!-- <a-select-option value="4">住户</a-select-option> -->
      </a-select>
      <a-auto-complete
        :style="{width: 'calc(100% - 100px)'}"
        :dataSource="dataSource"
        @select="onSelect"
        @search="handleSearch"
        :placeholder="placvalue"
      />
    </a-input-group>
     
  </a-card>
</template>

<script>
import moment from 'moment'
import { searchFee } from '@/api/manage'
import { mapGetters } from 'vuex'

export default {
  name: 'feeIndexs',
   components: {

  },
  data () {
    return {
      placvalue:'搜索说明：输入房号等即可快速搜索',
      dataSource :[],
      selectedValue: '1',
      allSource :[]
    }
  },
  created () {
   
  },
  methods: {
   ...mapGetters(['token', 'pmsArId', 'nowMg']),
   handleSearch (value) {
     if(value){
       searchFee({token: this.token(), ar_id: this.pmsArId(), cm_mg_id: this.nowMg(),type :this.selectedValue, keyword: value}).then(res=>{
       if (res.code == 0) {
         if(res.data.length>0){
            this.allSource=res.data
            let getdata=res.data
            let addData=[]
            switch(this.selectedValue){
              case '1':
                for( var i = 0;i<getdata.length;i++){
                  addData.push(`${getdata[i].period_message_id_text}-${getdata[i].bd_message_id_text}-${getdata[i].unit_message_id_text}-${getdata[i].name}`)
                }
                break
              case '2':
                this.placvalue='搜索说明：输入车牌等即可快速搜索'
                break
              case '3':
                this.placvalue='搜索说明：输入车位号等即可快速搜索'
                break
              case '4':
                this.placvalue='搜索说明：输入姓名、手机等即可快速搜索'
                break
              }
           
          this.dataSource =addData
        
        
         }else{
            this.dataSource=['暂无数据']
         }
          
        }else{
          this.confirmLoading= false;
          this.$notification['error']({
            message: '错误',
            description: res.msg,
            duration: 4
          })
        }
      })
     }else{
       this.dataSource=['暂无数据']
     }
     
   },
   onSelectChange (value) {
     this.selectedValue= value
     switch(value){
       case '1':
         this.placvalue='搜索说明：输入房号等即可快速搜索'
         break
       case '2':
         this.placvalue='搜索说明：输入车牌等即可快速搜索'
         break
       case '3':
         this.placvalue='搜索说明：输入车位号等即可快速搜索'
         break
       case '4':
         this.placvalue='搜索说明：输入姓名、手机等即可快速搜索'
         break
     }
   },
   onSelect (value) {
    let alldata=this.dataSource;
    let id=0;
    for(var i =0;i <alldata.length;i++){
      if(alldata[i]==value){
        id=this.allSource[i].id
      }
    }
   switch(this.selectedValue){
    case '1':
      this.$router.push({name:'houseInfo',query:{id:id}})
      break
    case '2':
      this.placvalue='搜索说明：输入车牌等即可快速搜索'
      break
    case '3':
      this.placvalue='搜索说明：输入车位号等即可快速搜索'
      break
    case '4':
      this.placvalue='搜索说明：输入姓名、手机等即可快速搜索'
      break
    }
           
   }
  }
}
</script>
